<template>
  <div>
    <el-row>
      <el-form :model="queryParams" ref="queryRef" :inline="true">
        <el-form-item label="开始时间" prop="date">
          <el-date-picker
            v-model="queryParams.startDate"
            type="date"
            placeholder="开始时间"
            size="default"
            @change="handleQuery"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="结束时间" prop="date">
          <el-date-picker
            v-model="queryParams.endDate"
            type="date"
            placeholder="结束时间"
            size="default"
            @change="handleQuery"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <div class="lineChart">
      <LineChart
        :chartData="mapeData"
        :YchartData="YmapeData"
        :title="mapetitle"
      />
    </div>
    <div class="lineChart">
      <LineChart
        :chartData="rsmeData"
        :YchartData="YrsmeData"
        :title="rsmetitle"
      />
    </div>
  </div>
</template>

<script lang="js" setup>
import {ref} from 'vue'
import moment from "moment"
import LineChart from '@/components/lineChart.vue'
import { getMengxiMonitorMape,getMengxiMonitorRmse } from "@/api/index.js"

// 初始化时间
const startDate = moment().subtract(90, "days").format("YYYY-MM-DD")
const endDate = moment().format("YYYY-MM-DD")
const queryParams =ref({
  startDate: startDate,
  endDate: endDate
})
const mapeData =ref()
const rsmeData =ref()
const YmapeData =ref()
const YrsmeData =ref()
const mapetitle =ref('蒙西全网统一MAPE指标')
const rsmetitle =ref('蒙西全网统一RSME指标')
//获取表格数据
const getData=()=>{
    getMengxiMonitorMape(queryParams.value).then(res=>{
        mapeData.value =res.data
        YmapeData.value = ConvertDataFormat(res.data)
    })
    getMengxiMonitorRmse(queryParams.value).then(res=>{
        rsmeData.value =res.data
        YrsmeData.value = ConvertDataFormat(res.data)
    })
}
// 转换数据格式
const ConvertDataFormat=(data)=>{
   const newDataArray = data.model_list.map(modelName => ({
       name: modelName,
       data: data[modelName],
       type: 'line',
      // stack: 'Total',
      markLine: {
        data: [
          { type: 'average', name: 'Avg' }
        ]
      }
    }));
    return newDataArray
}
/** 搜索操作 */
function handleQuery() {
    console.log(queryParams.value);
    getData();
}

getData()
</script>

<style scoped lang="scss">
.lineChart {
  width: 100%;
  height: 400px;
  margin: 20px 0 60px;
}
</style>
